.test{
    width: 750rem;
    height: 410rem;
    background-image: url(../images/background1.png);
    background-size: contain;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 80%;
    border-bottom-right-radius: 80%;
    font-size: 24rem;
}
.top {
  width: 750rem;
  height: 80rem;
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中子元素 */
  justify-content: space-between; /* 子元素在主轴上均匀分布 */
}
#current-time {
  font-size: 32rem;
}
.messages {
  display: flex;
}
.message {
  text-align: center;
}
.message img {
  width: 50rem;
  height: 48rem;
}
.container {
    height: 100rem;
    width: 70%;
    display: flex;
    align-items: top;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

.container p {
    margin-right: 42rem;
}

.container {
  height: 100rem;
  width: 70%;
  display: flex;
  align-items: top;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

.container p {
  margin: 0;
  font-size: 40rem;
}

.search-container {
display: flex;
align-items: center;
height: 60rem;
width: 350rem;
}
.search-input {
width: 300rem;
height: 40rem;
padding: 5rem;
font-size: 32rem;
border: 1rem solid #ccc;
border-radius: 40rem;
display: flex;
text-align: center;
}
.search-icon {
  position: relative;
}
.search-icon img {
width: 40rem;
height: 40rem;
transform: translateX(60rem); /* 向右移动40rem */
}

.bannerBox{
  width: 676rem;
  height: 344rem;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  margin-top: -250rem;
}
.banner img{
  width: 676rem;
  height: 344rem;
  border-radius: 50rem;
}
.instructs {
  display: flex;
  justify-content: center;
  margin-top: -24rem;
}
.instruct{
  width: 16rem;
  height: 16rem;
  background-color: #fff;
  border-radius: 50%;
  margin-left: 8rem;
}
#categoryContainer {
  display: flex;
  justify-content: space-around;
  width: 80%;
  height: 200rem;
  padding: 20rem;
  margin-left: auto;
  margin-right: auto; 
}
.item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.item img {
  width: 100rem;
  height: 100rem;
  margin: 10rem;
}
.item p {
  color: #262525;
  font-size: 30rem;
}
.text {
  display: flex;
  width: 90%;
  height: 50rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30rem;
}

.er {
  height: 50rem;
  width: 200rem;
  margin-right: 0rem;

}
.er p {
  color: #111010cd;
  font-size: 40rem;
  margin: 0;
}
.san {
  height: 50rem;
  width: 80rem;
  margin: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end; 
  margin-right: 20rem;
}
.san p {
  color: #fa0808;
  font-size: 25rem;
  margin: 0;
}
.si {
  height: 50rem;
  width: 300rem;
  overflow: hidden;
  display: flex;
  justify-self: flex-start;
  align-items: center;
}

.si span {
  white-space: nowrap;
  font-size: 30rem;
  animation: scrolling 10s linear infinite;
  display: none;
}

.si span:nth-child(1) {
  display: block;
}

@keyframes scrolling {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

#recommendMsg{
  font-size: 30rem;
  text-align: center;
  border-bottom: 2rem solid black;
}
.recommend{
  height: 390rem;
  width: 676rem; 
  margin: 20rem auto;
  background-color: bisque;
}
.recommend img{
  height: 290rem;
  width: 676rem; 
}
.one{
  height: 50rem;
  width: 365rem;
}
.recommend div{
  font-size: 35rem;
  color:black;
  display: inline-block;
  margin: 25rem;
}
.recommend div div{
  margin: 0rem;
  height: 50rem;
  width: 200rem;
  font-size: 35rem;
  background-color: gold;
  text-align: center;
  border-radius: 50rem;
  margin-left: auto;
  margin-right: auto;
}

.all {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 150rem;
}
.item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.all img {
  width: 80rem;
  height: 80rem;
}
.all p {
  font-size: 30rem;
  margin-top: 0rem;
}
.buttom {
  height: 80rem;
  width: 100%;
  display: flex;
  margin-right: auto;
  margin-left: auto;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}
.black-bar {
  width: 50%; 
  height: 20rem; 
  background-color: black;
  border-radius: 10rem;
}
